<template>
  <el-row>
    <el-card class="box-card">
      <el-col :span="24">
        <el-card class="box-card">
          产线 :
          <el-select v-model="value" clearable filterable
                     placeholder="请选择" style="width: 185px;" class="filter-item" @change="getdata">
            <el-option
              v-for="item in lineCodes"
              :key="item.id"
              :label="item.label"
              :value="item.value">
              <span style="float: left">{{ item.label }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
            </el-option>
          </el-select>
          <div style="" class="equipment_frame">
            <div style=" display:inline-block;width: 200px" v-for="item in equipmentOeeDaos" :key="item.deviceCode">
              <p style="color: #ec971f">{{item.deviceName}}</p>
              <div class="circle" :style="getColour(item.state)">
                <span>{{dict.label.device_status[item.state]}}</span>
              </div>
              <div class="single_equipment">
                <p>良品数量 : {{item.okNumber}}</p>
                <p>不良数量 : {{item.ngNumber}}</p>
                <p>良率 : {{item.yield}}%</p>
                <p>时间稼动率 : {{item.timeEfficency}}%</p>
                <p>性能稼动率 : {{item.performanceEfficency}}%</p>
                <p>oee : {{item.oee}}%</p>
              </div>
            </div>
          </div>

        </el-card>
      </el-col>
      <el-col :span="24">
        <el-card class="box-card">
          <div class="oeeFrame">
            <span style="width: 33%;display:inline-block;margin-top: 10px">计划时间 : <span style="color: #00FF00">{{formatSeconds(productionLineOeeDao.planTime)}}</span></span>
            <span style="width: 33%;display:inline-block;margin-top: 10px">时间稼动率 : <span style="color: #00FF00">{{productionLineOeeDao.timeCropRate}}%</span></span>
            <span style="width: 33%;display:inline-block;margin-top: 10px">生产数量(PCS) : <span style="color: #00FF00">{{productionLineOeeDao.productTotal}}</span></span>
            <span style="width: 33%;display:inline-block;margin-top: 10px">停机时间 : <span style="color: #00FF00">{{formatSeconds(productionLineOeeDao.devStopTime)}}</span></span>
            <span style="width: 33%;display:inline-block;margin-top: 10px">性能稼动率 : <span style="color: #00FF00">{{productionLineOeeDao.perfCropRate}}%</span></span>
            <span style="width: 33%;display:inline-block;margin-top: 10px">良品数(PCS) : <span style="color: #00FF00">{{productionLineOeeDao.oKTotal}}</span></span>
            <span style="width: 33%;display:inline-block;margin-top: 10px">稼动时间 : <span style="color: #00FF00">{{formatSeconds(productionLineOeeDao.deviceRunTime)}}</span></span>
            <span style="width: 33%;display:inline-block;margin-top: 10px">OEE : <span style="color: #00FF00">{{productionLineOeeDao.oee}}%</span></span>
            <span style="width: 33%;display:inline-block;margin-top: 10px">良率 : <span style="color: #00FF00">{{productionLineOeeDao.oKRate}}%</span></span>
            <span style="width: 33%;display:inline-block;margin-top: 10px">目标产量(PCS) : <span style="color: #00FF00">{{productionLineOeeDao.productTotal}}</span></span>
            <span style="width: 33%;display:inline-block;margin-top: 10px">当前进度 : <span style="color: #00FF00">{{productionLineOeeDao.controlRates}}%</span></span>
            <span style="width: 33%;display:inline-block;margin-top: 10px">小时进度 : <span style="color: #00FF00">{{productionLineOeeDao.controlRatesHour}}%</span></span>
            <span style="width: 33%;display:inline-block;margin-top: 10px">节拍(CT) : <span style="color: #00FF00">{{productionLineOeeDao.meter}}</span></span>
          </div>
        </el-card>
      </el-col>

    </el-card>
  </el-row>

</template>


<script>
  import oee from '@/api/statistical/oee'
  import CRUD, {presenter, header, form, crud} from '@crud/crud'
  import rrOperation from '@crud/RR.operation'
  import crudOperation from '@crud/CRUD.operation'
  import udOperation from '@crud/UD.operation'
  import pagination from '@crud/Pagination'
  import DateRangePicker from '@/components/DateRangePicker'
  import crudFactoryModel from "@/api/factory/factoryModel";

  const defaultForm = {
  }
  export default {
    name: 'StatisticalMeter',
    components: {pagination, crudOperation, rrOperation, udOperation,DateRangePicker,oee,crudFactoryModel},
    mixins: [presenter(), header(), form(defaultForm), crud()],
    dicts: ['graph_type','device_status'],
    cruds() {
      return CRUD({title: 'oee', url: '', idField: 'id', sort: 'id,desc', crudMethod: {...oee}})
    },
    data() {
      return {
        drawer: false,
        innerVisible: false,
        projecting: false,
        createTime: [],
        header: [],
        lineCodes:[],
        value: '',
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        equipmentOeeDaos:[
          {
            "deviceCode":"EOV123",
            "deviceName":"设备1",
            "okNumber":"60",
            "ngNumber":"2",
            "yield":"90",
            "timeEfficency":"50",
            "performanceEfficency":"50",
            "oee":"60"
          },
          {
            "deviceCode":"EOV124",
            "deviceName":"设备1",
            "okNumber":"60",
            "ngNumber":"2",
            "yield":"90",
            "timeEfficency":"50",
            "performanceEfficency":"50",
            "oee":"60"
          },
          {
            "deviceCode":"EOV125",
            "deviceName":"设备1",
            "okNumber":"60",
            "ngNumber":"2",
            "yield":"90",
            "timeEfficency":"50",
            "performanceEfficency":"50",
            "oee":"60"
          }
        ],
        productionLineOeeDao:{
          "planTime":"111",
          "devStopTime":"111",
          "deviceRunTime":"111",
          "planTotal":"111",
          "meter":"1111",
          "timeCropRate":"1111",
          "perfCropRate":"1111",
          "oee":"1111",
          "controlRates":"1111",
          "uph":"1111",
          "productTotal":"1111",
          "oKTotal":"1111",
          "oKRate":"111",
          "controlRatesHour":"1111"
        },
        permission: {
          add: ['admin', 'spcMain:add'],
          edit: ['admin', 'spcMain:edit'],
          del: ['admin', 'spcMain:del']
        },
        rules: {},
        queryTypeOptions: [
        ],
      }
    },
    methods: {
      // 钩子：在获取表格数据之前执行，false 则代表不获取数据
      [CRUD.HOOK.beforeSubmit]() {
        return true
      },
    formatSeconds(value) {
      let result = parseInt(value)
      let h = Math.floor(result / 3600) < 10 ? '0' + Math.floor(result / 3600) : Math.floor(result / 3600)
      let m = Math.floor((result / 60 % 60)) < 10 ? '0' + Math.floor((result / 60 % 60)) : Math.floor((result / 60 % 60))
      let s = Math.floor((result % 60)) < 10 ? '0' + Math.floor((result % 60)) : Math.floor((result % 60))
      result = h + ':' + m + ':' + s
    return result
  },
      //加载产线模型
      async loadFactoryModel(level, pid) {
        const params = {
          modelType: level,
          pid: pid
        };
        return await crudFactoryModel.list(params).then(res => {
          let nodes = [];
          if (res) {
            res.forEach(item => {
              nodes.push({
                value: item.modelCode,
                label: item.modelName,
                leaf: level >= 2,
                id: item.id,
                type: item.modelType
              });
            })
          }
          return nodes;
        })
      },
      //查询
      getdata(){
        oee.getEquipmentOee(this.value).then(res => {
          this.productionLineOeeDao = res.productionLineOeeDao
          this.equipmentOeeDaos = res.equipmentOeeDaos
        })
      },
      //返回设备状态颜色
      getColour(state){
          if (state == '1') {
            return "color:#5FB878"
          }else if (state == '2') {
            return "color:#409eff"
          }else if (state == '3') {
            return "color:#e6a23c"
          }else if (state == '4') {
            return "color:#f56c6c"
          }else if (state == '5') {
            return "color:#e6a23c"
          }else if (state == '6') {
            return "color:#909399"
          }
      }


    },
    created: function () {//这里是定时器
      setInterval(this.getdata, 2000 * 2);
    },
    mounted() {
      //获取产线信息
      const root = this.loadFactoryModel(2);
      const lineCodes = [];
      root.then((result) => {
        if (result) {
          result.forEach(item => {
            lineCodes.push(item);
          })
          this.value = result[0].value
          this.getdata()
        }
      })
      this.lineCodes = lineCodes;
    }
  }
</script>

<style scoped>
  /*圆*/
  .circle {
    width: 170px;
    height: 170px;
    border: 10px dashed;
    border-radius: 50%;
    display: inline-block;
    margin-top: 10px;
    margin-left: 5px;
    line-height: 160px;
    font-size: 25px;
    /*color: #00f6ff;
    vertical-align: middle;*/
  }

  /*设备状态框*/
  .equipment_frame {
    margin-top: 40px;
    /*border: 2px solid #00f6ff;*/
    border-radius: 5px;
    width: 100%;
    /*height: 450px;*/
    overflow: auto;
    white-space: nowrap;
    text-align: center;
  }

  /*单设备oee*/
  .single_equipment {
    width: 190px;
    height: 190px;
    border: 2px dashed #dddddd;
    margin-top: 12px;
    margin-left: 5px;
    border-radius: 5px;
    font-size: 19px;
    background-color: #d6e9c6;
  }
  * {
    background-color: #ffffff;
  }

  p {
    margin-bottom: 0px;
    margin-top: 5px;
  }
  /*oee边框*/
  .oeeFrame {
    /*border: 2px solid #00f6ff;*/
    width: 100%;
    height: 300px;
    margin-top: 30px;
    font-size: 30px;
    border-radius: 5px;
  }




  @keyframes fullScreenButAM {
    0% {
      font-size: 30px;
    }
    50% {
      font-size: 40px;
    }
    100% {
      font-size: 30px;
    }
  }

  @-moz-keyframes fullScreenButAM /* Firefox */
  {
    0% {
      font-size: 30px;
    }
    50% {
      font-size: 40px;
    }
    100% {
      font-size: 30px;
    }
  }

  @-webkit-keyframes fullScreenButAM /* Safari and Chrome */
  {
    0% {
      font-size: 30px;
    }
    50% {
      font-size: 40px;
    }
    100% {
      font-size: 30px;
    }
  }

  @-o-keyframes fullScreenButAM /* Opera */
  {
    0% {
      font-size: 30px;
    }
    50% {
      font-size: 40px;
    }
    100% {
      font-size: 30px;
    }
  }

  @media (min-width: 927px) and (max-width: 1107px) {
    .totalAmount .title {
      top: 60px;
      left: 15px;
    }
  }

  @media (min-width: 627px) and (max-width: 927px) {
    .totalAmount .title {
      top: 45px;
      left: 15px;
    }
  }
</style>
